<template>
	<view class="container">
		<!--input列表 -->
		<view class="input-box">
			<view class="section">
				<text>收 货 人</text>
				<input placeholder="姓名" type="text" maxlength="15" :value="receiver" @input="onReceiverInput">
			</view>
			<view class="section">
				<text>手机号码</text>
				<input placeholder="11位手机号码" type="number" maxlength="11" :value="mobile" @input="onMobileInput">
			</view>

			<view class="section" @tap="translate">
				<text>所在地区</text>
				<view class="pca">
					{{ province }} {{ city }} {{ area }}
				</view>
				<view class="animation-element-wrapper" :animation="animation"
					:style="'visibility:' + (show ? 'visible':'hidden')" @tap.stop="hiddenFloatView">
					<view class="animation-element" @tap.stop="nono">
						<text class="right-bt" @tap.stop="hiddenFloatView">
							确定
						</text>
						<view class="line" />
						<picker-view indicator-style="height: 50rpx;" :value="valArr" @change="bindChange"
							@tap.stop="nono">
							<!--省-->
							<picker-view-column>
								<view v-for="(item, indexs) in provArray" :key="indexs">
									{{ item.areaName }}
								</view>
							</picker-view-column>
							<!--地级市-->
							<picker-view-column>
								<view v-for="(item, indexss) in cityArray" :key="indexss">
									{{ item.areaName }}
								</view>
							</picker-view-column>
							<!--区县-->
							<picker-view-column>
								<view v-for="(item, indexsss) in areaArray" :key="indexsss">
									{{ item.areaName }}
								</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>

				<view class="arrow">
					<image src="@/static/images/icon/more.png" />
				</view>
			</view>
			<view class="section">
				<text>详细地址</text>
				<input placeholder="如楼号/单元/门牌号" type="text" :value="addr" @input="onAddrInput">
			</view>
		</view>
		<!-- end input列表 -->
		<!-- 功能按钮 -->
		<view class="btn-box">
			<view class="keep btn" @tap="onSaveAddr">
				<text>保存收货地址</text>
			</view>

			<view v-if="addrId!=0" class="clear btn" @tap="onDeleteAddr">
				<text>删除收货地址</text>
			</view>
		</view>
		<!-- end 功能按钮 -->
	</view>
</template>

<script>
	import number from "../../wxs/number";
	import {
		getUserAddrInfo,
		getAreaList,
		editUserAddr,
		deleteUserAddr
	} from "../../api/mine.js"

	export default {
		data() {
			return {
				addrId: 0,
				city: '',
				area: '',
				provinceId: 0,
				cityId: 0,
				areaId: 0,
				receiver: '',
				mobile: '',
				addr: '',
				province: '',
				provArray: [],
				valArr: [0, 0, 0],
				indexArr: [18, 0, 0],
				areaArray: [],
				cityArray: [],
				t: 0,
				moveY: 200,
				show: '',
				animation: ''

			}
		},
		methods: {
			initCityData(provinceId, cityId, areaId) {
				uni.showLoading()
				getAreaList(0)
					.then(({
						data
					}) => {
						this.provArray = data
						if (provinceId) {
							for (const index in data) {
								if (data[index].areaId === provinceId) {
									this.valArr = [parseInt(index), this.valArr[1], this.valArr[2]]
								}
							}
						}
						this.getCityArray(provinceId || data[0].areaId, cityId, areaId)
						uni.hideLoading()
					})
			},
			/**
			 * 滑动事件
			 */
			bindChange(e) {
				// 判断滑动的是第几个column
				const val = e.detail.value
				// 若省份column做了滑动则定位到地级市和区县第一位
				if (this.indexArr[0] != val[0]) {
					val[1] = 0
					val[2] = 0 // 更新数据
					// 获取地级市数据
					this.getCityArray(this.provArray[val[0]].areaId)
				} else {
					// 若省份column未做滑动，地级市做了滑动则定位区县第一位
					if (this.indexArr[1] != val[1]) {
						val[2] = 0 // 更新数据
						this.getAreaArray(this.cityArray[val[1]].areaId) // 获取区县数据
					}
				}
				this.indexArr = val
				this.valArr = [val[0], val[1], val[2]]
				this.province = this.provArray[this.valArr[0]].areaName
				this.city = this.cityArray[this.valArr[1]].areaName
				this.area = this.areaArray[this.valArr[2]].areaName
				this.provinceId = this.provArray[this.valArr[0]].areaId
				this.cityId = this.cityArray[this.valArr[1]].areaId
				this.areaId = this.areaArray[this.valArr[2]].areaId
			},
			/**
			 * 移动按钮点击事件
			 */
			translate() {
				if (this.t == 0) {
					this.moveY = 0
					this.show = true
					this.t = 1
				} else {
					this.moveY = 200
					this.show = false
					this.t = 0
				}
				this.animationEvents(this.moveY, this.show)
			},

			/**
			 * 隐藏弹窗浮层
			 */
			hiddenFloatView() {
				this.moveY = 200
				this.show = false
				this.t = 0
				this.animationEvents(this.moveY, this.show)
			},


			/**
			 * 动画事件
			 */
			animationEvents(moveY, showParam) {
				this.animation = uni.createAnimation({
					transformOrigin: '50% 50%',
					duration: 400,
					timingFunction: 'ease',
					delay: 0
				})
				this.animation.translateY(moveY + 'vh').step()
				this.animation = this.animation.export()
				this.show = showParam
			},

			/**
			 * 根据省份ID获取 城市数据
			 */
			getCityArray(provinceId, cityId, areaId) {
				getAreaList(provinceId)
					.then(({
						data
					}) => {
						this.cityArray = data
						if (cityId) {
							for (const index in data) {
								if (data[index].areaId == cityId) {
									this.valArr = [this.valArr[0], parseInt(index), this.valArr[2]]
								}
							}
						}
						this.getAreaArray(cityId || data[0].areaId, areaId)
						uni.hideLoading()
					})
			},

			/**
			 * 根据城市ID获取 区数据
			 */
			getAreaArray(cityId, areaId) {
				getAreaList(cityId)
					.then(({
						data
					}) => {
						this.areaArray = data
						if (areaId) {
							for (const _index in data) {
								if (data[_index].areaId == areaId) {
									this.valArr = [this.valArr[0], this.valArr[1], parseInt(_index)]
								}
							}
							this.indexArr = this.valArr
						} else {
							this.province = this.provArray[this.valArr[0]].areaName
							this.city = this.cityArray[this.valArr[1]].areaName
							this.area = this.areaArray[this.valArr[2]].areaName
							this.provinceId = this.provArray[this.valArr[0]].areaId
							this.cityId = this.cityArray[this.valArr[1]].areaId
							this.areaId = this.areaArray[this.valArr[2]].areaId
						} 
						uni.hideLoading()
					})
			},

			/**
			 * 保存地址
			 */
			onSaveAddr() {
				const receiverParam = this.receiver
				const mobileParam = this.mobile
				const addrParam = this.addr
				if (!receiverParam.trim()) {
					this.receiver = ''
					uni.showToast({
						title: '请输入收货人姓名',
						icon: 'none'
					})
					return
				}

				if (!mobileParam) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return
				}

				if (mobileParam.length != 11) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				if (!addrParam.trim()) {
					this.receiver = ''
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}

				uni.showLoading()
				let url = '/app/mine/addUserAddr'
				let method = 'POST'

				if (this.addrId != 0) {
					url = '/app/mine/editUserAddr'
					method = 'PUT'
				} // 添加或修改地址

				let data = {}
				data.receiver = this.receiver
				data.mobile = this.mobile
				data.addr = this.addr
				data.province = this.province
				data.provinceId = this.provinceId
				data.city = this.city
				data.cityId = this.cityId
				data.areaId = this.areaId
				data.area = this.area
				data.userType = 0
				data.addrId = this.addrId
				editUserAddr(method, url, data)
					.then(() => {
						uni.hideLoading()
						uni.navigateBack({
							delta: 1
						})
					})
			},

			onReceiverInput(e) {
				this.receiver = e.detail.value
			},
			onMobileInput(e) {
				this.mobile = e.detail.value
			},
			onAddrInput(e) {
				this.addr = e.detail.value
			},
			/**
			 * 删除配送地址
			 */
			onDeleteAddr() {
				let addrId = this.addrId
				uni.showModal({
					title: '',
					content: '确定要删除此收货地址吗？',
					confirmColor: '#eb2444',
					success(res) {
						if (res.confirm) {
							uni.showLoading()
							deleteUserAddr(addrId)
								.then(() => {
									uni.navigateTo({
										url: '/pages/delivery-address/delivery-address'
									})
									uni.hideLoading()
								})
						}
					}
				})
			},

		},
		onLoad(options) {
			if (options.addrId) {
				this.addrId = options.addrId
				uni.showLoading()
				getUserAddrInfo(options.addrId)
					.then(({
						data
					}) => {
						this.province = data.province
						this.city = data.city
						this.area = data.area
						this.provinceId = data.provinceId
						this.cityId = data.cityId
						this.areaId = data.areaId
						this.receiver = data.receiver
						this.mobile = data.mobile
						this.addr = data.addr
						this.addrId = options.addrId
						this.initCityData(data.provinceId, data.cityId, data.areaId)
						uni.hideLoading()
					})
			} else {
				this.initCityData(this.provinceId, this.cityId, this.areaId)
			}
		},

	}
</script>

<style scoped lang="scss">
	.container {
		background: #fff;
	}

	.input-box {
		margin-bottom: 50rpx;
		background: #fff;
		padding: 0 20rpx;

		.section {
			display: flex;
			align-items: center;
			width: 100%;
			font-size: 28rpx;
			padding: 30rpx 0;
			line-height: 48rpx;
			height: 100%;
			box-sizing: border-box;
			border-bottom: 2rpx solid #e5e5e5;

			text {
				width: 20%;
				color: #333;
			}

			input {
				width: 70%;
				padding: 0 20rpx;
				color: #333;
			}

			picker {
				width: 70%;
				padding: 0 30rpx;
			}

			.pca {
				width: 70%;
				padding: 0 20rpx;
			}

			.arrow {
				width: 28rpx;
				height: 28rpx;

				image {
					width: 100%;
					height: 100%;
					vertical-align: top;
				}
			}
		}
	}

	.btn-box {
		padding: 5px 10px;
		width: 100%;
		text-align: center;
		margin: auto;

		text {
			font-size: 30rpx;
		}

		.clear.btn {
			width: 60%;
			height: 80rpx;
			line-height: 80rpx;
			margin: auto;
			text-align: center;
			border: 1rpx solid #eb2444;
			border-radius: 50rpx;
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3);
			margin-top: 40rpx;
			color: #eb2444;
			background-color: #f8f0f1b6;
		}

		.keep {
			color: #fff;
			background-color: #eb2444;
		}
	}

	.keep.btn {
		width: 60%;
		height: 80rpx;
		line-height: 80rpx;
		margin: auto;
		text-align: center;
		border: 1rpx solid #eb2444;
		border-radius: 50rpx;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3);
	}

	.infoText {
		margin-top: 20rpx;
		text-align: center;
		width: 100%;
		justify-content: center;
	}

	picker-view {
		background-color: white;
		padding: 0;
		width: 100%;
		height: 380rpx;
		bottom: 0;
		position: fixed;

		text {
			color: #999;
			display: inline-flex;
			position: fixed;
			margin-top: 20rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			font-size: 34rpx;
			font-family: Arial, Helvetica, sans-serif;
		}
	}

	picker-view-column {
		view {
			vertical-align: middle;
			font-size: 28rpx;
			line-height: 28rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.animation-element-wrapper {
		display: flex;
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 999;
	}

	.animation-element {
		display: flex;
		position: fixed;
		width: 100%;
		height: 470rpx;
		bottom: 0;
		background-color: rgba(255, 255, 255, 1);
	}

	.animation-button {
		top: 20rpx;
		width: 290rpx;
		height: 100rpx;
		align-items: center;
	}

	.left-bt {
		left: 30rpx;
	}

	.right-bt {
		right: 20rpx;
		top: 20rpx;
		position: absolute;
		width: 80rpx !important;
	}

	.line {
		display: block;
		position: fixed;
		height: 2rpx;
		width: 100%;
		margin-top: 89rpx;
		background-color: #eee;
	}
</style>